<template>
	<view class="doctor_info">
		<view class="info_avatar">
			<image :src="item.avatar || 'https://www.qidujiangtaigong.com/api//admin-api/infra/file/0/get/2b4e1a3e542b87133e8a689fe126555e9d906a511bfdcde36a0192d84c79ea80.jpg'" mode="aspectFill"></image>
		</view>
		<view class="info_text">
			<view class="doctor_info_self">
				<view class="text_name">
					{{item.name || ''}}
				</view>
				<view>
					{{item.titleName || ''}}
				</view>
				<view>
					{{item.departName || ''}}
				</view>
			</view>
			<view class="doctor_info_hospitoal">
				<view class="info_tips green">
					{{item.levelName || '未知'}}
				</view>
				<view>
					{{item.hospitalName || ''}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'doctorInfo',
		data() {
			return {

			}
		},
		props: {
			item: {
				type: [Object, String],
				default: () => {
					return {}
				}
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.doctor_info {
		font-size: 24rpx;
		color: #666666;
		display: flex;
		align-items: center;

		.info_text {
			margin-left: 30rpx;

			.doctor_info_self,
			.doctor_info_hospitoal {
				display: flex;
				align-items: flex-end;

				&>view {
					margin-right: 20rpx;
				}
			}

			.doctor_info_hospitoal {
				margin-top: 20rpx;
				align-items: center;
				font-size: 26rpx;
			}

			.text_name {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			.info_tips {
				padding: 6rpx 10rpx;
				border-radius: 10rpx;
				font-size: 22rpx;

				&.green {
					color: #23CC88;
					background-color: #DEF7ED;
				}

				&.yellow {
					color: #F1AE34;
					background-color: #FDF3E1;
				}
			}
		}

		.info_avatar {
			width: 90rpx;
			height: 90rpx;
			border-radius: 100%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}
</style>